<!-- 首页 -->
<template>
  <div>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item>
        <img src="../../assets/M.jpg" alt="" />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://officialwebsitestorage.blob.core.chinacloudapi.cn/public/upload/photo_db/2021/01/06/202101061440454100/202101061440454100_640_398.jpg?202012251902086533&rand=0827"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://officialwebsitestorage.blob.core.chinacloudapi.cn/public/upload/photo_db/2021/09/17/202109171435433611/202109171435433611_640_398.jpg?&rand=0827"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <div class="container">
      <div class="top">
        <div class="user">
          <van-image
            v-if="currentUser"
            width="50"
            height="50"
            round
            cover
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-04edf6da1449917c59889bf69d8c8c2d_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1637198432&t=85338ca637e275871c1e0938e6c5bca1"
          />
          <van-image
            v-else
            width="50"
            height="50"
            round
            cover
            :src="require('@/assets/pic.png')"
          />
          <span
            >下午好, <b>{{ userInfo.username }}</b></span
          >
        </div>
        <div class="coupon">
          <img src="../../assets/coupon.png" alt="" />
        </div>
      </div>

      <div class="shop">
        <van-grid border :column-num="3">
          <van-grid-item>
            <div>
              <span>i配送</span>
              <p class="desc">10辣翅39.9元</p>
              <van-image :src="require('/src/assets/deliver.png')" />
            </div>
          </van-grid-item>
          <van-grid-item @click="$router.push('/shop')">
            <span>到店取餐</span>
            <p class="desc">10辣翅39.9元</p>
            <van-image :src="require('/src/assets/h.png')" />
          </van-grid-item>
          <van-grid-item>
            <span>麦咖啡</span>
            <p class="desc">25元2杯</p>
            <van-image
              src="https://officialwebsitestorage.blob.core.chinacloudapi.cn/public/upload/attachment/2021/10/202110201035364530.png"
            />
          </van-grid-item>
        </van-grid>
      </div>

      <h3>热门活动</h3>
      <div class="show">
        <div class="goods" v-for="i in 3" :key="i">
          <img src="../../assets/M.jpg" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getCurrentUserInfo } from "@/api/userInfo.js";

export default {
  name: "Home",
  data() {
    return {
      currentUser: "",
    };
  },
  methods: {
    async getCurrentUser() {
      if (this.userInfo) {
        let { data } = await getCurrentUserInfo({
          username: this.userInfo.username,
        });
        console.log(data);
        this.currentUser = data.data;
        this.$store.commit("SET_USERINFO", this.currentUser);
      }
    },
  },
  created() {
    this.getCurrentUser();
  },
  computed: {
    ...mapState(["userInfo"]),
  },
};
</script>

<style lang= "less" scoped>
.van-swipe-item {
  img {
    width: 100%;
    height: 180px;
  }
}
.container {
  width: 100%;
  padding: 0 14px;
  box-sizing: border-box;
  background-color: rgb(238, 235, 235);
  border-radius: 10px;
  margin-top: -10px;
  position: relative;
  .top {
    padding: 10px 0;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    .user {
      width: 150px;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
    }
    .coupon {
      img {
        border-radius: 10px;
        width: 110px;
        height: 40px;
      }
    }
  }
  .shop {
    border-radius: 10px;
    overflow: hidden;
    height: 146px;
    font-size: 14px;
    text-align: center;
    .desc {
      font-size: 12px;
      color: gray;
      margin-top: -1px;
    }
    .van-image {
      height: 80px;
      width: 80px;
    }
  }
  .show {
    .goods {
      border-radius: 10px;
      width: 100%;
      height: 160px;
      overflow: hidden;
      margin: 8px 0;
      img {
        width: 100%;
        height: 160px;
      }
    }
  }
}
</style>